<!--短信验证码-->
<template>
	<view class="yl-phone-msg-code">
		<view class="popup-mask" v-if="showPopup" @tap="hidePopup"></view>
		<view class="popup-wrap" v-if="showPopup">
			<view class="inputbox row-start">
				<text v-if="mobilePrepend" class="mobile-prepend" :style="prependStyle">{{mobilePrepend}}</text>
				<input type="number" :min="0" v-model.trim="msgForm.mobile" :style="mobileInputStyle"
					placeholder-class="input-placeholder" placeholder="请输入手机号" maxlength="11" />
			</view>
			<view class="inputbox">
				<input v-model.trim="msgForm.code" placeholder-class="input-placeholder"
					placeholder="请输入短信验证码"/>
				<view @tap="getMsgCode">
					<slot name="getCode" :msgCodeText="msgCodeText">
						<view class="msg-code-text row-center ">{{msgCodeText}}</view>
					</slot>
				</view>
			</view>
			<view class="btn-box">
				<button class="btn btn-yellow" @tap="savePhone">提交修改</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "phoneMsgCode",
		props: {
			showPopup: {
				type: Boolean,
				default: false
			},
			mobilePrepend: {
				type: String,
				default: '+86'
			}, //手机号前缀
			reqMobileCode: {
				type: Function,
				require: true
			}, //获取验证码函数
			getCodeStyle: {
				type: [Object, String],
				default: ""
			}, //获取验证码样式
			mobileStyle: {
				type: [Object, String],
				default: () => {
					return {}
				}
			}, //电话输入框样式
			codeStyle: {
				type: [Object, String],
				default: () => {
					return {}
				}
			}, //验证码输入框样式
			msgCodeTextConfig:{
			  type:Object,
			  default:()=>{
			    return {
			      getCodeText:"",
			      reCodeText:"",
			    }
			  }
			},// 发送按钮文字
		},
		data() {
			return {
				msgForm: {}, //短信表单
				msgCodeText: this.msgCodeTextConfig.getCodeText || '获取验证码', //短信按钮文字
			}
		},
		computed: {
			prependStyle() {
				const {
					mobilePrependStyle
				} = this
				if (typeof mobilePrependStyle === 'string') {
					return mobilePrependStyle
				}
				return this.getStyleStr({
					...mobilePrependStyle
				})
			},
			mobileInputStyle() {
				const {
					mobileStyle
				} = this
				if (typeof mobileStyle === 'string') {
					return mobileStyle
				}
				return this.getStyleStr({
					...mobileStyle
				})
			},
		},
		methods: {
			savePhone() {
			    if (this.msgForm.mobile && this.msgForm.code) {
					this.$emit("onCommit", this.msgForm.mobile, this.msgForm.code)
				} else {
					uni.showToast({
						title: '手机号码或者验证码为空！',
						duration: 1000,
						icon: 'error',
						position: ''
					})
				}
			},
			hidePopup() {
				// 关闭弹窗
				this.msgForm = {}
				this.$emit('hideDialog')
			},
			/**
			 * 获取样式
			 */
			getStyleStr(styles) {
				let styleStr = ''
				for (let i in styles) {
					styleStr += `${i}:${styles[i]};`
				}
				return styleStr
			},
			isPhone(str) {
				const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
				return reg.test(str)
			},
			/**
			 * 获取验证码
			 * @returns {Promise<void>}
			 */
			async getMsgCode() {
				if (this.hasSend) {
					uni.showToast({
						title: '操作太频繁！',
						duration: 1000,
						icon: 'error',
						position: ''
					})
					return
				}
				let {
					mobile,
					code
				} = this.msgForm
				console.info('3333')
				this.$emit('resendCode', mobile)
				console.info('3444')
				if (!mobile) {
					uni.showToast({
						title: '手机号不能为空',
						duration: 1000,
						icon: 'error',
						position: ''
					})
					return
				}
				if (!this.isPhone(mobile)) {
					uni.showToast({
						title: '手机号不正确',
						duration: 1000,
						icon: 'error',
						position: ''
					})
					return
				}
				this.getCodTime()
				typeof this.reqMobileCode === "function" && this.reqMobileCode(mobile, code)
			},
			/**
			 * 获取倒计时
			 */
			getCodTime() {
				let code = 60
				this.msgCodeText = code + ' s'
				this.hasSend = true
				this.codeInterval = setInterval(() => {
					code--
					this.msgCodeText = code + ' s'
					if (code < 0) {
						clearInterval(this.codeInterval)
						this.msgCodeText = this.msgCodeTextConfig.reCodeText || '重新发送'
						this.hasSend = false
					}
				}, 1000)
			}
		},
		beforeDestroy() {
			clearInterval(this.codeInterval)
		}
	}
</script>

<style scoped lang="scss">
	/* 弹窗遮罩样式 */
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	/* 弹窗内容样式 */
	.popup-wrap {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 80%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		z-index: 1000;
	}


	/* 手机验证码样式 */
	.yl-phone-msg-code {
		.inputbox {
			display: flex;
			padding: 20rpx;
			align-items: center;
			border-bottom: 1rpx solid #eeeeee;
			position: relative;

			.mobile-prepend {
				margin-right: 20rpx;
			}
		}

		.inputbox .clearBox {
			width: 32rpx;
			height: 32rpx;
		}

		.inputbox .clear {
			width: 32rpx;
			height: 32rpx;
		}

		input {
			flex: 1;
			font-size: 26rpx;
			color: #333333;
		}

		.row-center {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		
		.msg-code-text {
			border: solid 1px #FED233;
			color: #FED233;
			border-radius: 10rpx;
			width: 170rpx;
			height: 64rpx;
			font-size: 24rp;
		}
		
		.btn-box {
			margin-top: 30rpx;
			
			.btn {
				color: #333333;
				font-weight: 600;
			}
			
			.btn-yellow {
				background-color: #FED233;
			}
		}
	}
</style>
